<template>
	<view class="login">
		<view class="login-from">
			<view class="login-logo">
				<image src="../../../static/logo.png" mode="aspectFit"></image>
			</view>
			<!-- <view class="login-bg">
				<image src="../../../static/login-bg.png" mode="aspectFit"></image>
			</view> -->
			<view class="from">
				<van-cell-group>
					<van-field 
						type="number"
						clearable
						placeholder="请输入手机号码"
						:border="false"
						@change="cPhone" />
					<van-field 
						clearable
						type="password"
						:border="false"
						placeholder="请输入密码"
						@change="cPassword" />
					<!-- <van-field
							type="number"
							clearable
							:border="false"
							@change="cVerification"
							use-button-slot
							placeholder="请输入验证码"
							>
						<view class="register-from-sms" :class="{'activeSMS': ifSMS}" @tap="getSMS" slot="button">
							{{ timer.text }}
						</view>
					</van-field> -->
				</van-cell-group>
				<view class="login-text">
					<view @click="goRegister">注册账号</view>
					<view  @click="goResetPwd">忘记密码?</view>
				</view>
			</view>
		</view>
		<view class="login-btn" :class="{'active': active}">
			<van-button
				size="large"
				custom-class="login-btn-reset"
				:loading="loading"
				@click="onSubmit"
			>
				登录
			</van-button>
		</view>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
const md5 = require("md5");
export default {
	data() {
		return {
			loading: false,
			active: false,
			ifSMS: false,
			from: {
				phone: '',
				// verification: '',
				password: ''
			},
			verify: {
				phone: '手机号码格式不正确',
				password: '密码格式不正确'
			},
			serverTime: '',
			timer: {
				func: '',
				count: '',
				text: '获取验证码'
			} // 倒计时
		};
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	onLoad() {
		if (Object.prototype.toString.call(this.userInfo) === '[object Object]') {
			if (Object.keys(this.userInfo).length > 1) {
				uni.switchTab({
					url: '/pages/wallet/index'
				});
			}
			return;
		}
	},
	methods: {
		...mapActions([
				'setUserInfo',
				'setMnemonic'
			]),
		onSubmit () {
			if (this.loading) return
			if (!this.active) return
			this.loading = true
			this.$http.login({
				tel:this.from.phone,
				pwd: this.from.password,
			})
			.then(e => {
				if (e.data.msg === "0") {
					uni.showModal({
						title: '提示',
						content: '您还没有助记词，为了您的账户安全，请前往备份助记词',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/user/mnemonic/creation?phone=' + this.from.phone
								});
							}
						}
					});
					return
				}
				if (e.data.data) {
					this.setMnemonic(e.data.data)
					uni.reLaunch({
						url: `/pages/user/mnemonic/login-verify?phone=${this.from.phone}&pwd=${this.from.password}`
					});
					return
				}
				uni.showToast({
					title: e.data.msg, 
					icon: 'none'
				});
				this.loading = false
			}).catch(err => {
				this.loading = false
			})
		},
		goRegister() {
			uni.navigateTo({
				url: '/pages/user/login/register'
			});
		},
		goResetPwd () {
			uni.navigateTo({
				url: '/pages/user/reset/resetPwd'
			});
		},
		cPhone(e) {
			this.from.phone = e.detail;
			this.verify.phone = reg.regPhone(this.from.phone)
			this.ifVerif()
		},
		cPassword(e) {
			this.from.password = e.detail;
			this.verify.password = reg.regPassword(this.from.password)
			this.ifVerif()
		},
		cVerification(e) {
			this.from.verification = e.detail;
			this.verify.verification = reg.regVerification(this.from.verification)
			this.ifVerif()
		},
		ifVerif() {
			const arr = Object.values(this.verify);
			if (arr.length >= 2) {
				for (const i of arr) {
					if (i) {
						this.active = false
						return
					}
				}
				this.active = true
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../common/user.scss';
</style>